$draftail-editor-text: $color-input-text;
// w-body-text-large
$draftail-editor-font-size: theme('fontSize.18');
$draftail-editor-line-height: theme('lineHeight.normal');

$draftail-editor-chrome: theme('colors.primary.DEFAULT');
$draftail-editor-chrome-text: $color-white;
// This needs to remain a Sass value due to a limitation in Draftail.
// $draftail-editor-chrome-active: $color-white;
$draftail-editor-chrome-active: #fff;
$draftail-editor-chrome-accent: transparent;

$draftail-base-spacing: 0.375rem;
$draftail-editor-radius: 0;
$draftail-editor-border: 0;
$draftail-editor-padding: theme('spacing.[2.5]') theme('spacing.5');
$draftail-editor-background: $color-white;
$draftail-block-spacing: theme('spacing.[2.5]');
$draftail-toolbar-radius: theme('borderRadius.DEFAULT');
$draftail-toolbar-icon-size: 1em;

$draftail-trigger-additional-size: 30px;
$draftail-block-hoverable-area-offset: 40px;

$draftail-editor-font-family: $font-sans;

@import '../../../../node_modules/draft-js/dist/Draft';
@import '../../../../node_modules/draftail/src/index';

@import './Tooltip/Tooltip';
@import './CommentableEditor/CommentableEditor';
@import './EditorFallback/EditorFallback';

@import './decorators/TooltipEntity';

@import './blocks/MediaBlock';
@import './blocks/ImageBlock';
@import './blocks/EmbedBlock';

@include draftail-richtext-styles {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // Overrides for heading styles of Wagtail itself.
    color: inherit;
    line-height: 1;
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1.1em;
  }
}

.Draftail-Editor {
  --draftail-offset-inline-start: 0;
}

.Draftail-Editor__wrapper {
  // Ensure elements within the editor are positioned according to this container.
  position: relative;
  // Make fields take up the whole available width in their container.
  width: 100%;
}

.Draftail-ToolbarButton,
.Draftail-ComboBox__option {
  .icon {
    width: $draftail-toolbar-icon-size;
    height: $draftail-toolbar-icon-size;
    vertical-align: middle;
  }

  .icon-h1,
  .icon-h2,
  .icon-h3,
  .icon-h4,
  .icon-h5,
  .icon-h6 {
    width: 1.5 * $draftail-toolbar-icon-size;
  }
}

.Draftail-Toolbar {
  border: 1px solid $color-grey-3;
}

.Draftail-MetaToolbar {
  position: absolute;
  inset-inline-end: 0;
  visibility: hidden;

  // Make sure the toolbar is always visible for devices that do not hover.
  @media (hover: hover) {
    visibility: hidden;

    .Draftail-Editor:focus-within &,
    .Draftail-Editor:hover & {
      visibility: visible;
    }
  }
}

.Draftail-BlockToolbar {
  position: absolute;
  background: transparent;
  // Adds additional hoverable area so block trigger will be shown when hovering to the side of the field.
  width: $draftail-block-hoverable-area-offset;
  inset-inline-start: -$draftail-block-hoverable-area-offset;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
}

.Draftail-BlockToolbar__trigger {
  color: theme('colors.secondary.DEFAULT');
  width: theme('spacing.4');
  height: theme('spacing.4');
  margin-inline-end: theme('spacing.1');

  @include media-breakpoint-up(sm) {
    width: theme('spacing.5');
    height: theme('spacing.5');
  }

  // Increase the hoverable area of the trigger button
  &::before {
    content: '';
    background: transparent;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    inset-inline-start: 50%;
    top: 50%;
    width: $draftail-trigger-additional-size;
    height: $draftail-trigger-additional-size;
    border-radius: theme('borderRadius.DEFAULT');
    z-index: 1;
  }

  // Hide the trigger unless the editor is hovered, focused, or an element within it is focused.
  .Draftail-Editor:not(:hover, .Draftail-Editor--focus, :focus-within) & {
    // Hide even if the conditions to display it are met.
    // stylelint-disable-next-line declaration-no-important
    visibility: hidden !important;
  }

  &:hover,
  &:focus-visible {
    color: $color-white;
    background-color: $color-teal;
  }

  .icon {
    width: theme('spacing.3');
    height: theme('spacing.3');
  }
}

.Draftail-ComboBox [role='combobox'] {
  padding: theme('spacing.4');
}

.Draftail-ComboBox [aria-autocomplete='list'] {
  border-radius: theme('borderRadius.DEFAULT');
  border: 1px solid $color-input-border;
}

.Draftail-ComboBox__menu {
  padding: 0 theme('spacing.4');
}

.Draftail-ComboBox__optgroup-label {
  @apply w-label-3;
  background-color: theme('colors.grey.50');
}

.Draftail-ComboBox__option,
.Draftail-ComboBox__status {
  color: theme('colors.primary.DEFAULT');
  padding: theme('spacing.3') 0;
  border-width: 1px;
}

.Draftail-ComboBox__option[aria-selected='true'] {
  color: theme('colors.secondary.DEFAULT');
  border-radius: theme('borderRadius.sm');
  background: transparent;
}

.Draftail-ComboBox__option-icon {
  color: inherit;
  margin: 0 theme('spacing.3');
}

.Draftail-ComboBox__option-text {
  @apply w-label-3;
  color: inherit;
}

.Draftail-ToolbarGroup::before {
  display: none;
}

.Draftail-ToolbarGroup--controls::before {
  display: inline-block;
  height: 1.875rem;
  background-color: $color-white;
  opacity: 0.2;
}

.Draftail-ToolbarButton {
  height: 1.875rem;
  min-width: 1.875rem;
  padding: 0;
  margin-inline-end: 0.625rem;

  .Draftail-ToolbarGroup:last-of-type &:last-of-type {
    margin-inline-end: 0;
  }

  &[disabled] {
    opacity: 0.3;
  }

  &:hover,
  &:active {
    border: 1px solid $color-grey-3;
  }
}

.Draftail-Editor__wrapper .public-DraftEditor-content {
  @include input-base();
  @include show-focus-outline-inside();
}

.Draftail-block--blockquote {
  border-inline-start: 0.25em solid $color-grey-3;
  color: $color-grey-2;
  margin: 1em 0;
  padding: 1em 2em;
}

.DraftEditor-editorContainer {
  border: 0;
}
